<!DOCTYPE html>
<html  style="overflow : hidden; ">
<head>
    <title>地理位置标注</title>
    <meta name="keywords" content="矢量瓦片,矢量索引">
    <meta name="description" content="矢量瓦片">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../sdk_web/leafletSDK/css/leaflet.css" />
    <link rel="stylesheet" href="../sdk_web/leafletSDK/css/MarkerCluster.css" />
    <link rel="stylesheet" href="../sdk_web/leafletSDK/css/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="../css/style.css">
</head>

<body style="margin : 0; ">
    <div id="map" class="map" style ="position:absolute;bottom:0px;top:0px;width:100%"></div>
    <input type="text" placeholder="输入企业名、统一信用代码、地址等查询" class="iptSearch" />
    <div class="filterBtn">
        <span>附近<i class="icon-arrow"></i></span></div>
    
    <ul class="btn_handler_box">
        <li class="whiteBtn" data-filter=""></li><li class="greenBtn" data-filter="1"></li>
        <li class="blueBtn" data-filter="2"></li><li class="redBtn" data-filter="3"></li>
        <li data-filter="reset"><img src="../img/location.png" style="height: 30px;" data-filter="reset"></li>
    </ul>
    
    <div class="custom-mask"></div>
    <ul class="custom-container">
        <li data-metter="">不限</li><li data-metter=500>500m</li><li data-metter=1000>1000m</li><li data-metter=3000>3000m</li>
    </ul>

    <div class="detail_info">
        <div class="info_tip clearfix">
            <div class="info_box">
                <p class="legalEntity_info"><span class="legalEntity_name"></span><span class="regState"><i>存续</i></span></p>
                <p class="mt15 ellips"><i class="menu_icon menu_icon_1"></i>工商联络员：<span class="legalRep_name"></span>&nbsp;<span class="legalRep_tel"></span></p>
                <p class="mt15 ellips"><i class="menu_icon menu_icon_2"></i>地址：<span class="address_info"></span></p>
            </div>
            <div class="location_box">
                <p><span class="distance_info"></span>km</p>
                <i class="menu_icon menu_icon_3"></i>
            </div>
        </div>
        <ul class="menu_box clearfix">
            <li class="gocheck"><p><i class="menu_icon menu_icon_4"></i>去检查</p></li><li class="unfind"><p><i class="menu_icon menu_icon_5"></i>查无下落</p></li>
            <li class="detail"><p><i class="menu_icon menu_icon_6"></i>详情</p></li><li class="call_tel"><p><i class="menu_icon menu_icon_7"></i>打电话</p></li>
        </ul>
    </div>


    <script src="../sdk_web/leafletSDK/js/uuid.js"></script>
    <script src="../sdk_web/leafletSDK/js/leaflet-src.js"></script>
    <script src="../sdk_web/leafletSDK/js/leaflet.js"></script>
    <script src="../sdk_web/leafletSDK/js/CustomWebSDK.min.js"></script> 
    <script src="../sdk_web/leafletSDK/js/leaflet.markercluster.js"></script>
    <script src="../libs/jquery-1.12.3.min.js"></script>
    <!-- <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> -->
    <script src="https://appx/web-view.min.js"></script>
    <script>
        if (navigator.userAgent.indexOf('AlipayClient') > -1) {
          document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
        }
        my.getEnv(function(res) {
            if (!res.miniProgram) {
                my.alert({
                    content:JSON.stringify('运行出错')
                });
            }
        });
        var initLatlng, initZoom = 10, cityName, newCenterData,  markDatas = [], map, markers, mapParams;
        
        my.postMessage('init');
        // 来自小程序的消息。
        my.onMessage = function(e) {
            initLatlng = {lon: e.lon, lat: e.lat} || {lon: 120.14989, lat: 30.27751};  // 默认经纬度为蓝天商务中心
            cityName = e.cityName || "杭州市";
            markDatas = e.markDatas;
            // my.alert({
            //     content: JSON.stringify(init)
            // }); // 测试是否接收到小程序中传来的数据
            drawMap(e.init)
        }
        function drawMap(e) {
            if (e) { init(); return; }
            reductionMap()
            drawMarekers()
        }

        function init() {
            map = L.map('map',{crs:L.CRS.CustomEPSG4326,center: initLatlng, minZoom: 5, zoom: initZoom, inertiaDeceleration:15000, zoomControl: false});
            var tileAddress = 'http://ditu.zjzwfw.gov.cn/mapserver/vmap/zjvmap/getMAP?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017';

            var layer = new L.GXYZ(tileAddress, {tileSize:512, minZoom: 5});
            map.addLayer(layer);

            // 添加注记图层
            var labelLayer = new L.GWVTAnno({tileSize:512});
            var dataSource = new Custom.URLDataSource();
            dataSource.url = 'http://ditu.zjzwfw.gov.cn/mapserver/label/zjvmap/getDatas?x=${x}&y=${y}&l=${z}&styleId=tdt_biaozhunyangshi_2017';
            labelLayer.addDataSource(dataSource);
            map.addLayer(labelLayer);

            // 添加标记点
            markers = L.markerClusterGroup();
            drawMarekers();
            map.addLayer(markers);

            map.on('click', function (e) {
                if($(".detail_info").hasClass('active')) { 
                    $(".detail_info").removeClass('active');
                }
            });

        }

        $('.filterBtn').on('click', function () {
            changeSatus();
        });

        $('.custom-mask').on('click', function () {
            changeSatus('remove');
        });

        $('.custom-container').on('click', function (ev) {
            changeSatus('remove');
            var metter = $(ev.target).data('metter');
            my.postMessage({type: 'distance', val: metter});
        });

        $('.iptSearch').on('keydown',function(e){
            // e.preventDefault();
            if(e.keyCode == 13){
                var keyWord = cityName + e.target.value;
                if (e.target.value) {
                    my.postMessage({type: 'keyword', val: e.target.value});
                } else {
                    my.alert({
                        content: "请输入查询关键字"
                    });
                }
            }
        });

        $('.btn_handler_box').on('click', function (ev) {
            var filter = $(ev.target).data('filter');
            if (filter == "" || filter == "1" || filter == "2" || filter == "3") {
                my.postMessage({type: 'checkState', val: filter});
                return
            }
            if (filter == "reset") {
                map.setView([Number(initLatlng.lat), Number(initLatlng.lon)], initZoom);
                return
            }
        });
        $(".call_tel").on("click", function () {
            var phoneNum = $(".call_tel").data("tel");
            my.postMessage({type: 'callPhone', val: phoneNum});
        });

        $(".menu_icon_3").on("click", function () {
            my.postMessage({type: 'openMap', val: mapParams});
        });

        $(".detail").on("click", function () {
            my.postMessage({type: 'detail', val: mapParams});
        });

        $(".gocheck").on("click", function () {
            my.postMessage({type: 'gocheck', val: mapParams});
        });

        $(".unfind").on("click", function () {
            my.postMessage({type: 'unfind', val: mapParams});
        });
        

        function drawMarekers() {
            markDatas.forEach(function (val, index) {
                var preState = val.checkState, marker, customIcon;
                switch(preState){
                    case "1":
                        marker = L.marker([val.lat, val.lon], {draggable: false, opacity: 1, icon: L.divIcon({className: 'green-marker', html: '<p>' + (index + 1) + '</p>'})});
                        break;
                    case "2":
                        marker = L.marker([val.lat, val.lon], {draggable: false, opacity: 1, icon: L.divIcon({className: 'blue-marker', html: '<p>' + (index + 1) + '</p>'})});
                        break;
                    case "3":
                        marker = L.marker([val.lat, val.lon], {draggable: false, opacity: 1, icon: L.divIcon({className: 'red-marker', html: '<p>' + (index + 1) + '</p>'})});
                        break;
                }
                markers.addLayer(marker);
                marker.on('click', function (e) {
                    if($(".detail_info").hasClass('active')) { 
                        $(".detail_info").removeClass('active');
                    }
                    var idx = parseInt(e.originalEvent.target.textContent) - 1;
                    getAdressInfo(markDatas[idx]);
                });
            });
        }

        function reductionMap() {
            markers.clearLayers();
            map.setView([Number(initLatlng.lat), Number(initLatlng.lon)], initZoom);
        }

        function getAdressInfo (e) {
            var reverseResolutionUrl = encodeURI("http://dh.ditu.zj.cn:18005/inverse/getInverseGeocoding.jsonp?&detail=1&zoom=11&latlon=" + e.lon + "," + e.lat + "&lat=&lon=&customer=2");
            $.ajax({
                url: reverseResolutionUrl,
                dataType: "jsonp",
                // jsonp: "callback",
                success: function(res) {
                    var location = res.city.value + res.dist.value + res.town.value + res.poi;
                    $(".legalEntity_name").text(e.legalEntityName)
                    $(".legalRep_name").text(e.legalRep)
                    $(".legalRep_tel").text(e.tel)
                    $(".address_info").text(location)
                    $(".distance_info").text((parseInt(e.distance) / 1000).toFixed(2));
                    $(".call_tel").data("tel", e.tel);
                    mapParams = {
                        longitude: e.lon,
                        latitude: e.lat,
                        name: res.poi,
                        address: res.poi,
                    };
                    $(".detail_info").addClass('active');
                },
                error: function (err) {
                    my.alert({
                        content: "地址解析出错"
                    });
                }
            });
        }

        function changeSatus (handler) {
            if (handler == 'remove') {
                $('.custom-mask').removeClass('custom-mask--visible');
                $('.custom-container').removeClass('custom-container--visible');
                $('.custom-container li').removeClass('active');
            } else {
                $('.custom-mask').addClass('custom-mask--visible');
                $('.custom-container').addClass('custom-container--visible');
                $('.custom-container li').addClass('active');
            }
            
        }

        
        

    </script>

</body>
</html>
